<template>
<el-row class="container">
    <el-col :span="24" class="header">
        <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
            {{collapsed?'':sysName}}
        </el-col>
        <el-col :span="10">
            <div class="tools" @click.prevent="collapse">
                <i class="fa fa-align-justify"></i>
            </div>
        </el-col>
        <el-col :span="4" class="userinfo">
            <el-dropdown trigger="hover">
                <span class="el-dropdown-link userinfo-inner">{{sysUserName}}</span>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item>我的消息</el-dropdown-item>
                    <el-dropdown-item>设置</el-dropdown-item> -->
                    <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-col>
    <el-col :span="24" class="main">
        <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router :collapse="isCollapse" background-color="#2f3e52" text-color="#fff" active-text-color="#ffd04b">
                <template v-for="(item,index) in  routesList" v-if="!item.hidden">

                    <template v-if="item.children.length>0">

                        <el-submenu :index="index+''" v-if="!item.leaf">
                            <template slot="title">
                                <i class="fa" :class="item.iconCls"></i>
                                <span class="title-name" slot="title">{{item.name}}</span>
                            </template>
                            <el-menu-item class="title-name" v-for="child in item.children" :index="child.path" :key="child.id" :base-path="item.path" v-if="!child.hidden">
                                <i :class="child.iconCls"></i>{{child.name}}
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i
                                            :class="item.iconCls"></i>{{item.children[0].name}}
                        </el-menu-item>
                    </template>
                    <template v-else>

                        <el-menu-item :index="item.path">
                            <i class="fa" :class="item.iconCls"></i>
                            <template slot="title">
                                <span class="title-name" slot="title">{{item.name}}</span>
                            </template>

                        </el-menu-item>

                    </template>
                </template>

            </el-menu>
        </aside>
        <el-col :span="24" class="content-wrapper" style="height:100%; overflow:auto;padding-right: 10px;padding-left: 10px;padding-top:5px;" :class="collapsed?'content-collapsed':'content-expanded'">

            <div class="tags" v-if="showTags">
                <ul>
                    <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
                        <span class="tag-dot-inner"></span>
                        <router-link :to="item.path" class="tags-li-title">
                            {{item.title}}
                        </router-link>
                        <template v-if="index==0">
                            <span class="tags-li-icon"  @click="closeTags(index)"><i ></i></span>
                        </template>
                        <template v-else>
                            <span class="tags-li-icon"  @click="closeTags(index)"><i class="el-icon-close" style="font-size:5px;" ></i></span>
                        </template>
                    </li>
                </ul>

            </div>
            <transition name="fade" mode="out-in">
                <div class="content-az">
                    <router-view></router-view>
                </div>
            </transition>
        </el-col>

    </el-col>
</el-row>
</template>

<script>
export default {
    data() {
        return {
            sysName: 'vue.cms',
            collapsed: false,
            isCollapse: false,
            sysUserName: '',
            sysUserAvatar: '',
            tagsList: [],
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            routesList: []
        }
    },
    computed: {
        showTags() {

            if (this.tagsList.length > 1) {
                this.$store.commit("saveTagsData", JSON.stringify(this.tagsList));
            }

            return this.tagsList.length > 0;
        }
    },
    methods: {
        isActive(path) {
            return path === this.$route.fullPath;
        },
        collapse: function () {
            this.collapsed = !this.collapsed;
            this.isCollapse = !this.isCollapse;

        },
        closeTags(index) {
            const delItem = this.tagsList.splice(index, 1)[0];
            const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
            if (item) {
                delItem.path === this.$route.fullPath && this.$router.push(item.path);

                this.$store.commit("saveTagsData", JSON.stringify(this.tagsList));
            } else {
                this.$router.push('/');
            }
        },
        // 设置标签
        setTags(route) {
            if (!route.meta.NoTabPage) {
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                });
                !isExist && this.tagsList.push({
                    title: route.name,
                    path: route.fullPath,
                    // name: route.matched[1].components.default.name
                })

            }

        },
        onSubmit() {
            console.log('submit!');
        },
        handleopen() {

        },
        handleclose() {

        },
        handleselect: function (a, b) {},
        //退出登录
        logout: function () {
            var _this = this;
            this.$confirm('确认退出吗?', '提示', {
                //type: 'warning'
            }).then(() => {

                _this.routesList = [];
                _this.tagsList = [];
                _this.$store.commit("clearAllItem");
                _this.$router.push('/login');
                window.location.reload();
            }).catch(() => {

            });

        },
        //折叠导航栏
        collapse: function () {
            this.collapsed = !this.collapsed;
        },
        showMenu(i, status) {
            this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
        }
    },
    updated() {
               console.info("updated");
        debugger;
        var routers = JSON.parse(window.localStorage.Router ? window.localStorage.Router : null);
        if (this.routesList.length <= 0 && routers && routers.length >= 0) {
            this.routesList = routers;
        }
    },
    mounted() {
                console.info("mounted");
        debugger;
        this.sysUserName = sessionStorage.getItem("UserName");
        // var user = sessionStorage.getItem('user');
        // if (user) {
        //     user = JSON.parse(user);
        //     this.sysUserName = user.name || '';
        //     this.sysUserAvatar = user.avatar || '';
        // }
        var tags = sessionStorage.getItem('Tags') ? JSON.parse(sessionStorage.getItem('Tags')) : [];

        if (tags && tags.length > 0) {
            this.tagsList = tags;
        }

        var routers = JSON.parse(window.localStorage.Router ? window.localStorage.Router : null);
        if (this.routesList.length <= 0 && routers && routers.length >= 0) {
            this.routesList = routers;
        }

    },
    watch: {

        // 对router进行监听，每当访问router时，对tags的进行修改
        $route(newValue) {

            this.setTags(newValue);
        }
    },
    created() {
        console.info("created");
        // var routers = JSON.parse(window.localStorage.Router ? window.localStorage.Router : null);
        // if (this.routesList.length <= 0 && routers && routers.length >= 0) {
        //     this.routesList = routers;
        // }
        // 第一次进入页面时，修改tag的值
        this.setTags(this.$route);

    },
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;

    .header {
        height: 60px;
        line-height: 60px;
        background: $color-primary;
        color: #fff;

        .userinfo {
            text-align: right;
            padding-right: 35px;
            float: right;

            .userinfo-inner {
                cursor: pointer;
                color: #fff;

                img {
                    width: 50px;
                    height: 50px;
                    border-radius: 20px;
                    margin: 10px 0px 10px 10px;
                    float: right;
                }
            }
        }

        .logo {
            //width:230px;
            height: 60px;
            font-size: 22px;
            padding-left: 20px;
            padding-right: 20px;
            border-color: rgba(238, 241, 146, 0.3);
            border-right-width: 1px;
            border-right-style: solid;

            img {
                width: 40px;
                float: left;
                margin: 10px 10px 10px 18px;
            }

            .txt {
                color: #fff;
            }
        }

        .logo-width {
            width: 230px;

        }

        .logo-collapse-width {
            width: 60px
        }

        .tools {
            padding: 0px 23px;
            width: 14px;
            height: 60px;
            line-height: 60px;
            cursor: pointer;
        }
    }

    .main {
        display: flex;
        // background: #324057;
        position: absolute;
        top: 60px;
        bottom: 0px;
        overflow: hidden;

        aside {
            flex: 0 0 230px;
            width: 230px;

            // position: absolute;
            // top: 0px;
            // bottom: 0px;
            .el-menu {
                height: 100%;
            }

            .collapsed {
                width: 60px;

                .item {
                    position: relative;
                }

                .submenu {
                    position: absolute;
                    top: 0px;
                    left: 60px;
                    z-index: 99999;
                    height: auto;
                    display: none;
                }

            }
        }

        .menu-collapsed {
            flex: 0 0 60px;
            width: 60px;
        }

        .menu-expanded {
            flex: 0 0 230px;
            width: 230px;
        }

        .content-container {
            // background: #f1f2f7;
            flex: 1;
            // position: absolute;
            // right: 0px;
            // top: 0px;
            // bottom: 0px;
            // left: 230px;
            overflow-y: scroll;
            padding: 20px;

            .breadcrumb-container {

                //margin-bottom: 15px;
                .title {
                    width: 200px;
                    float: left;
                    color: #475669;
                }

                .breadcrumb-inner {
                    float: right;
                }
            }

            .content-wrapper {
                background-color: #fff;
                box-sizing: border-box;
            }
        }
    }
}
</style><style>
.tags {
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;
    /* height:30px; */
    /* margin-bottom: 20px; */
    background: #fff;
}

.tags ul {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.tags-li {
    float: left;
    margin: 3px 5px 2px 3px;
    border-radius: 3px;
    font-size: 13px;
    overflow: hidden;
    height: 23px;
    line-height: 23px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 3px 5px 4px 12px;
    vertical-align: middle;
    color: #666;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.tags-li-icon {
    cursor: pointer;
}

.tags-li.active .tags-li-icon {
    color: #2d8cf0;
}

.tags-li:not(.active):hover {
    background: #f8f8f8;
}

.tags-li-title {
    float: left;
    /* max-width: 80px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #666;
    text-decoration: none;
}

.tags-li.active {
    /* color: #fff;
    border: 1px solid #10B9D3;
    background-color: #10B9D3; */
    border: 1px solid #2d8cf0;
    /* color: #fff; */
}

.tags-li.active .tags-li-title {
    /* color: #fff; */
    color: #2d8cf0;
}

.tags-close-box {
    box-sizing: border-box;
    text-align: center;
    z-index: 10;
    float: right;
    margin-right: 1px;
    line-height: 2;
}

.tag-dot-inner {
    background: #ccc;
    float: left;
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    margin-right: 8px;
    position: relative;
    top: 6px;
    width: 12px;
    -webkit-transition: background .2s ease;
    transition: background .2s ease
}

.active .tag-dot-inner {
    background: #2d8cf0;
}

.table {

    box-shadow: 0 5px 10px #ddd;
    border: 1px solid #f0f0f0;
}
</style>
